<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>

<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
if(canvas.getContext){  
    var ctx = canvas.getContext("2d");  
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    var circle = {
        x : 100,    
        y : 100,    
        r : 50     
    };
    ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);    
    ctx.stroke();
}
</script>
</body>
</html>
